<template>
	<div>
		<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm.data" :rules="rules" label-width="auto"
			class="demo-ruleForm" :size="formSize" status-icon>
			<el-form-item label="订单名称" prop="OrdersName">
				<el-input v-model="ruleForm.data.OrdersName" />
			</el-form-item>

			<el-form-item label="客户名称" prop="ClientId">
				<el-select v-model="ruleForm.data.ClientId" style="width: 200px;" filterable placeholder="请选择你的客户">
					<el-option v-for="item in Client" :value="item.Id"  :label="item.ClientName"></el-option>
				</el-select>				
			</el-form-item>
			
			<el-form-item label="业务名称" prop="BusinessId">
				<el-select  v-model="ruleForm.data.BusinessId" style="width: 200px;" filterable
					placeholder="请选择你的业务">
					<el-option v-for="item in Business" :value="item.Id" :label="item.BusinessName"></el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item label="总经理" prop="MangerId">
				<el-select v-model="ruleForm.data.MangerId" style="width: 200px;" filterable placeholder="请选择总经理">
					<el-option v-for="item in Manger" :value="item.Id" :label="item.UserName"></el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item label="总金额" prop="SumPrice">
				<el-input v-model="ruleForm.data.SumPrice" />
			</el-form-item>
			
			<el-form-item label="订单描述" prop="OrdersDesc">
				<el-input v-model="ruleForm.data.OrdersDesc" />
			</el-form-item>
			
			<el-form-item label="状态" prop="Status">
				<el-select-v2 v-model="ruleForm.data.Status" placeholder="请选择状态" :options="optionsStatus" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm(ruleFormRef)">
					保存
				</el-button>
				<el-button @click="resetForm(ruleFormRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import { ComponentSize, FormInstance, FormRules, ElNotification, ElForm, ElFormItem } from 'element-plus'

	import ordersapi from "@/api/ordersapi"
	import clientapi from"@/api/clientapi"
	import Businessapi from "@/api/Businessapi"
	import userapi from '@/api/userapi';
	//客户
	const Client = ref([])
	//业务
	const Business = ref([])
	//总经理
	const Manger = ref([])
	
	const props = defineProps({
		Id: Number,
	});
	const emit = defineEmits(['onSave'])

	interface RuleForm {
		OrdersName : string
		ClientId:number
		BusinessId:number
		MangerId:number
		SumPrice:number
		OrdersDesc : string
		Status : number
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		data: {
			OrdersName: '',
			ClientId:0,
			BusinessId:0,
			MangerId:0,
			SumPrice:0,
			OrdersDesc: '',
			Status: 1,
		}
	})

	const rules = reactive<FormRules<RuleForm>>({
		OrdersName: [
			{ required: true, message: '请输入角色名称', trigger: 'blur' },

		],

	})

	const optionsStatus = [
		{
			value: 1,
			label: "正常",
		},
		{
			value: 0,
			label: "删除",
		},
		{
			value: -1,
			label: "禁用",
		}
	]

	//查询客户
	const getclient = () => {
		clientapi.select().then(res => {
			//console.log("Client.value=",res.data)
			Client.value = res.data;
		}).catch(err => {
			console.log(err)
		})
	}
	//查询总经理
	const getmanger = () => {
		userapi.select({ DeptId: 0 }).then(res => {
			Manger.value = res.data;
		}).catch(err => {
			console.log(err)
		})
	}
	//查询业务员
	const getbuiness = () => {
		Businessapi.select().then(res => {
			Business.value = res.data;
		}).catch(err => {
			console.log(err)
		})
	}
	
	const getData = () => {
		ordersapi.get({ id: props.Id }).then(res => {
			console.log("aaa=", ruleForm.data);
			console.log("bbb=",res.data)
			ruleForm.data = res.data
		})
	}
	onMounted(() => {
		getData();
		getclient();
		getbuiness();
		getmanger();
	})
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate(valid => {

			if (valid) {
				console.log("ruleForm.data", ruleForm.data)

				ordersapi.put(ruleForm.data).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '修改成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>